<template>
	<view class="find">
		<!-- 导航 -->
		<view class="nav">
			<view class="text" :class=" current == 1 ? 'active' : '' " @tap="navEvents(1)">精选文章</view>
			<view class="text" :class=" current == 2 ? 'active' : '' " @tap="navEvents(2)">品牌列表</view>
		</view>
		<!-- 精选文章 -->
		<view class="articleList" v-if="current == 1">
			<view class="item" v-for="(item,index) in articleList" :key="item.id">
				<view class="top" @tap="goArticleInfo(item.id)">
					<image class="img" :src="item.coverImg"></image>
					<view class="title">{{ item.title }}</view>
					<view class="author">{{ item.author }}</view>
				</view>
				<view class="info">
					<view class="left">
						<image class="icon" src="../../static/icons/view.png"></image>
						<view class="num">{{ item.viewCount }}</view>
					</view>
					<view class="right">
						<uni-icons :color="item.isCollected ? '#ff0000' : '#000000' " type="star" size="20" @tap="collected(item)"></uni-icons>
						<!-- <image class="star"  src="../../static/icons/star.png" @tap="collected(item)"></image> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 品牌列表 -->
		<view class="brandList" v-else>
			<view class="item" v-for="item in brandList" :key="item.id">
				<image class="img" :src="item.bigPic"></image>
				<view class="name">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { findArticleByPage,findBrandsByPage } from '../../api/find/index.js'
	export default {
		data() {
			return {
				articleList: [], // 文章 - 列表
				start: 1, // 文章 - 当前页
				limit: 10, // 文章 - 每页数量
				current: 1, // 文章 - 标题切换
				brandList: [], // 品牌 - 列表
				// isCollected: false, // 品牌 - 列表
			};
		},
		onLoad() {
			// 本地存储 - 获取
			var collected = uni.getStorageSync("articleList");
			// 精选文章
			findArticleByPage(this.start,this.limit).then(res=>{
				// 本地存储 - 判断是否有内容
				if(collected == ''){
					// isCollected - 全为false
					res.data.data.rows.forEach(ele=>ele.isCollected = false);
				}else{
					res.data.data.rows.forEach((ele,index)=>{
						// isCollected - 全为false
						res.data.data.rows[index].isCollected = false;
						collected.forEach(el=>{
							// 本地存储 == res.data.data.rows
							if(ele.id == el.id){
								// isCollected - true
								res.data.data.rows[index].isCollected = true
							}
						})
					});
				}
				this.articleList = res.data.data.rows
			});
			// 品牌列表
			findBrandsByPage(this.start,this.limit).then(res=>{
				this.brandList = res.data.data.rows
			});
		},
		methods:{
			// 导航 - 切换
			navEvents(val){
				this.current = val
			},
			// 跳转 - 文章详情页
			goArticleInfo(val){
				uni.navigateTo({
					url: `./articleInfo/articleInfo?articleId=${val}`
				})
			},
			// 文章 - 收藏
			collected(val){
				// 本地存储 - 获取
				var collected = uni.getStorageSync("articleList");
				// 判断本地存储列表 - 是否有数据
				if(collected == ''){
					// 图标 - 变红
					val.isCollected = true;
					// 本地存储 - 添加
					uni.setStorageSync("articleList",[val]);
				}else{
					// 当前数据 - 查找
					var item = collected.find(ele=>ele.id == val.id);
					// 当前数据 - 查找 - 下标
					var index = collected.findIndex(ele=>ele.id == val.id);
					// 当前数据 - 判断
					if(item){
						// 图标 - 变黑
						val.isCollected = false;
						// 取消收藏 - 删除当前数据
						collected.splice(index,1);
						// 数据列表 - 重新存储
						uni.setStorageSync("articleList",collected);
					}else{
						// 图标 - 变红
						val.isCollected = true;
						// 当前数据 - 添加
						collected.push(val);
						// 数据列表 - 重新存储
						uni.setStorageSync("articleList",collected);
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>
